{extend name="base"}
{block name="style"}
<link rel="stylesheet" href="{:_static()}/css/common.css" media="all" />
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=7U2BZ-WT3C6-3SFSH-EPX5Z-OW3YT-C6F7A"></script>
<script type="text/javascript" src="{:_static()}/components/qqMap.js"></script>

{/block}
{block name="main"}
<style type="text/css">
    .el-icon-minus,.el-icon-plus{line-height: inherit !important;}
</style>
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="10" >
            <el-button type="primary" size="small" @click="addDialog=true">添加任务分组</el-button>
        </el-col>
    </el-row>
    <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="ID" width="70" align="center" sortable></el-table-column>
        <el-table-column prop="title" label="标题" width="150" align="center"></el-table-column>
        <el-table-column prop="pc" label="PC管理端状态" width="150" align="center" >
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.pc" size="mini">显示</el-tag>
                <el-tag type="info" v-else size="mini">隐藏</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="phone" label="移动管理端状态" width="150" align="center" >
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.phone" size="mini">显示</el-tag>
                <el-tag type="info" v-else size="mini">隐藏</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="event" label="Event" width="150" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" width="110" align="center">
            <template slot-scope="scope">
                <el-button type="danger" size="mini" class="ws-mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id,true)">删除</el-button>

                <el-button type="primary" size="mini" class="ws-mini" @click="edit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page">{$list->render()|raw}</div>


    <!-- 添加、编辑素材 start -->
    <el-dialog :title="dialogTitle" width="500px" :visible.sync="addDialog">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="标题" prop="title">
                <el-input v-model="data.title" placeholder="素材标题"></el-input>
            </el-form-item>
            <el-form-item label="Event" prop="event">
                <el-input v-model="data.event" placeholder="唯一的分组识别码"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="data.status">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">启用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="PC管理端" prop="pc">
                <el-radio-group v-model="data.pc">
                    <el-radio :label="0">隐藏</el-radio>
                    <el-radio :label="1">显示</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="移动端" prop="phone">
                <el-radio-group v-model="data.phone">
                    <el-radio :label="0">隐藏</el-radio>
                    <el-radio :label="1">显示</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="data.remark" placeholder="备注"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('forms','{:url(\'groupAdd\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 添加、编辑素材 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        dialogTitle:'添加任务分组',
        addDialog:false,
        data:{}, 
        rules:{
            title:{required:true,message:'标题不能为空'},
            event:{required:true,message:'Event不能为空'}
        },
        
    },
    created(){
        this.emptyData();
    },
    computed:{
        // 添加素材 提交数据
        submitData(){
            let options={};
            this.options.forEach(item=>{
                if(item.value>0&&item.name!=='media'){
                    options[item.name]=item.default;
                }
            })
            return Object.assign(this.data,{options},{images:this.fileList});
        },
    },
    methods:{
        emptyData(newData={}){
            this.data=Object.assign({
                title:'',
                event:'',
                remark:'',
                status:1,
                pc:1,
                phone:1,
            },this.clone(newData));
        },
        edit(row){
            this.emptyData(row);
            this.addDialog=true;
            this.dialogTitle='编辑任务分组';
        },
    },
});
</script>
{/block}